import React, {useRef} from "react";
import {createStyles} from "antd-style";

const useStyles = createStyles(({css, token}) => {
    const btnDefault = css`
        display: block;
        background-color: transparent;
        border: none;
        width: 100%;
        height: 50px;
        font-size: 18px;
        line-height: 50px;
        text-wrap: nowrap;
        transition: all .2s;
        border-bottom: 0 solid #00000000;
        padding: 0 14px;

        &:hover {
            backdrop-filter: blur(15px);
            background-color: ${token.colorPrimaryBg};
            cursor: pointer;
            
            span {
                color: ${token.colorPrimaryTextHover};
            }
        }

        span {
            color: ${token.colorText};
        }
        .content {
            margin-left: 10px;
        }
    `

    return {
        btn: css`
            ${btnDefault};
        `,
        btnActive: css`
            ${btnDefault};
            border-bottom: 2px solid ${token.colorPrimary};
            
            span {
                color: ${token.colorPrimaryText};
            }
        `,
    }
})

interface HeaderButtonProps {
    onClick: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
    content?: React.ReactNode
    icon?: React.ReactNode
    active?: boolean
}

const HeaderButton: React.FC<HeaderButtonProps> = ({content, icon, onClick, active}) => {
    const {styles} = useStyles()
    const btn = useRef<HTMLButtonElement>(null);

    return (
        <button className={active ? styles.btnActive : styles.btn}
                onClick={onClick}
                ref={btn}
        >
            {icon && icon}
            {content && <span className="content">{content}</span>}
        </button>
    )
}

export default HeaderButton
